﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="智能社 - zhinengshe.com"/>
    <meta name="copyright" content="智能社 - zhinengshe.com"/>
    <title>智能社 - www.zhinengshe.com</title>


    <style type="text/css">
        /*reset*/
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
            list-style: none;
            font: 12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"
        }

        /*公共样式*/
        body {
            padding-top: 50px;
            line-height: 20px
        }

        .userPic {
            padding: 5px;
            border: 1px #ccc solid
        }

        .demo01, .demo02 {
            margin-bottom: 20px
        }

        p {
            text-indent: 2em
        }

        /*初级*/
        .demo01 {
            width: 600px;
            overflow: hidden
        }

        .demo01 .left {
            width: 100px;
            float: left
        }

        .demo01 .left .userPic {
            margin-left: 20px
        }

        .demo01 .right {
            width: 458px;
            float: right;
            padding: 20px;
            background-color: #EEF7FF;
            border: 1px solid #CCC
        }

        .demo01 .right h6 {
            margin-bottom: 5px
        }

        .demo01 .right .pubTime {
            float: right;
            color: #999;
            margin-top: -8px
        }

        /*中级*/
        .demo02 {
            width: 600px;
            overflow: hidden
        }

        .demo02 .userPic {
            float: left;
            margin-left: 20px
        }

        .demo02 .right {
            width: 458px;
            float: right;
            padding: 20px;
            background-color: #EEF7FF;
            border: 1px solid #CCC
        }

        .demo02 .right h6 {
            margin-bottom: 5px
        }

        .demo02 .right .pubTime {
            float: right;
            color: #999;
            margin-top: -8px
        }

        /*高级*/
        .demo03 {
            width: 460px;
            padding: 20px;
            position: relative;
            background-color: #EEF7FF;
            border: 1px solid #CCC;
            margin-left: 100px
        }

        .demo03 h6 {
            margin-bottom: 5px
        }

        .demo03 .dialog p {
            text-indent: 2em;
            line-height: 20px
        }

        .demo03 .userPic {
            float: left;
            margin: -20px 0 0 -100px
        }

        .demo03 .pubTime {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #999;
        }
    </style>
</head>

<body>
<!---demo01----------------------------------->
<div class="demo01">
    <div class="left">
        <img class="userPic" src="images/head01.jpg" width="50" height="50"/>
    </div>

    <div class="right">
        <span class="pubTime">10分钟前</span>
        <h6>樱桃小丸子</h6>
        <p>
            奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
    </div>
</div>

<!---demo02----------------------------------->
<div class="demo02">
    <img class="userPic" src="images/head01.jpg" width="50" height="50"/>
    <div class="right">
        <span class="pubTime">10分钟前</span>
        <h6>樱桃小丸子</h6>
        <p>
            奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
    </div>
</div>

<!---demo03----------------------------------->
<div class="demo03">
    <img class="userPic" src="images/head01.jpg" width="50" height="50"/>
    <h5>樱桃小丸子</h5>
    <p>
        奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
    <span class="pubTime">10分钟前</span>
</div>

</body>
</html>
